import React, { useRef } from 'react'
import { Button, Input } from 'antd'

function Authorization() {
  const refValue = useRef(
    'https://open.oceanengine.com/audit/oauth.html?app_id=1788123142414403&state=your_custom_params&material_auth=1&rid=s3dlvrg97bi'
  )
  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
    refValue.current = e.target.value
  }
  const handleAccess = () => {
    window.location.href = refValue.current
  }
  return (
    <div>
      <h3
        style={{
          margin: '8px 0'
        }}
      >
        授权链接
      </h3>
      <div style={{ display: 'flex', gap: 12 }}>
        <Input
          style={{ width: '100%' }}
          onBlur={handleBlur}
          defaultValue={refValue.current}
        />
        <Button type="primary" onClick={handleAccess}>
          去授权
        </Button>
      </div>
    </div>
  )
}
export default Authorization
